body{font-size: 14px; padding: 0; margin: 0;}
.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden;}
.clearfix{ zoom:1;}
.opterationfixed {
  position: fixed;
  left: 60px;
  top: 50%;
  top:10%\9;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
}
:root .opterationfixed {
  top: 50%;
}
.opterationfixed .item {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color:#fff;
  background-image: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
	background-image: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
	background-image: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
	background-image: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
	background-image: linear-gradient(to top, #f0f0f0, #ffffff);
  -webkit-box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 24px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  white-space: nowrap;
  display: flex;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.opterationfixed .item:hover {
  background:#258FFB;
  width:120px;
  -webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.opterationfixed .item .icon_optf {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url(../images/icon1.png) no-repeat;
}
.opterationfixed .item:hover .icon_optf {
  background-image: url(../images/icon1_hover.png);
}
.opterationfixed .item .icon_optf1 {
  background-position: 0 0;
}
.opterationfixed .item .icon_optf2 {
  background-position: 0 -50px;
}
.opterationfixed .item .icon_optf3 {
  background-position: 0 -100px;
}
.opterationfixed .item .icon_optf4 {
  background-position: 0 -150px;
}
.opterationfixed .item .icon_optf5 {
  background-position: 0 -200px;
}
.opterationfixed .item .icon_optf6 {
  background-position: 0 -250px;
}
.opterationfixed .item .text_opt_notice {
  display: none;
  line-height: 50px;
  padding: 0 20px 0 5px;
  color: #fff;
  font-size: 16px;
}
.opterationfixed .item:hover .text_opt_notice {
  display: block;
}

.themeList-u {
  margin: 0 -7px;
}
.themeList-u ul, .themeList-u li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.themeList-u li {
  float: left;
  width: 33.33%;
  margin-bottom: 14px;
}
.themeList-u li .item {
  margin: 0 7px;
  background: #F9F9F9;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  border:1px solid #F9F9F9;
}
.themeList-u li.active .item{
  border-color:#258FFB;
}
.themeList-u li .item .img{
  background: #fff;
  height: 110px;
  overflow: hidden;
  line-height: 110px;
  text-align: center;
}
.themeList-u li .item .img img {
  max-width: 100%;
}
.themeList-u li .tml-opt {
  padding: 10px 0 0;
}
.themeList-u li .tml-opt .tml-color{
  float: left;
}
.themeList-u li .tml-opt .tml-color .color-value{
   display:inline-block;
   width: 18px;
   height: 18px;
   -webkit-border-radius: 50%;
   border-radius: 50%;
}
.themeList-u li .tml-opt .tml-preview {
  float: right;
}
.themeList-u li .tml-opt .tml-preview a { 
  color: #258FFB;
}



.icon-compontent-list {
  overflow: hidden;
}
.icon-compontent-list ul,.icon-compontent-list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.icon-compontent-list ul {
  display: block;
  margin: 0 -7px;
}
.icon-compontent-list li{
  float: left;
  margin-bottom: 20px;
  width: 20%;
  text-align: center;
}
.icon-compontent-list li .item {
  margin: 0 7px;
  cursor: pointer;
}
.icon-compontent-list li .item:hover,.icon-compontent-list li.selected .item {
  color: #258FFB;
}
.icon-compontent-list li .icon {
  margin-bottom: 3px;
}
.icon-compontent-list li .name {
  line-height: 1.5;
}
.icon-compontent-list li .icon-compontent {
  width: 60px;
  height: 40px;
  display: inline-block;
  background: url(../images/icon_compontents.png) no-repeat;
}
.icon-compontent-list li .item:hover .icon-compontent,.icon-compontent-list li.selected .icon-compontent  {
  background-image: url(../images/icon_compontents_hover.png)
}
.icon-compontent-list li .icon-compontent1 {
  background-position: 0 0;
}
.icon-compontent-list li .icon-compontent2 {
  background-position: -60px 0;
}
.icon-compontent-list li .icon-compontent3 {
  background-position: -120px 0;
}

/*------*/
.opt-wire {
  position: relative;
}
.opt-wire .opt-wire-t {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 1px dashed #258FFB;
}
.opt-wire .opt-wire-r {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 1px dashed #258FFB;
}
.opt-wire .opt-wire-b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px dashed #258FFB;
}
.opt-wire .opt-wire-l {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #258FFB;
}
.opt-wire .opt-wire-move {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  background:#E4EFFC;
  cursor: move;
}
.opt-wire .icon-opt-move {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  background:url(../images/icon-opt.png) no-repeat -240px 0;
}
.opt-wire .opt-wire-move:hover .icon-opt-move {
  background-position: -240px -30px;
}
.opt-toolbar {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color:#fff;
  background-image: -webkit-linear-gradient(bottom, #f9f9f9, #ffffff);
	background-image: -moz-linear-gradient(bottom, #f9f9f9, #ffffff);
	background-image: -o-linear-gradient(bottom, #f9f9f9, #ffffff);
	background-image: -ms-linear-gradient(bottom, #f9f9f9, #ffffff);
	background-image: linear-gradient(to top, #f9f9f9, #ffffff);
  -webkit-box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 24px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0,0,0,0.1);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.opt-toolbar .opt-toolbar-in {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.opt-toolbar .opt-toolbar-l {
  cursor:pointer;
  color: #1c64ea;
  padding: 10px 15px;
}
.opt-toolbar .icon-opt {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/icon-opt.png) no-repeat;
  vertical-align: middle;
}
.opt-toolbar .icon-opt-edit {
  background-position: -5px -35px;
  width: 20px;
  height: 20px;
  vertical-align: top;
}
.opt-toolbar .opt-toolbar-r {
  padding: 10px 5px;
  display: flex;
  align-items: center;
}
.opt-toolbar .opt-toolbar-r .opt-btn {
  cursor: pointer;
  margin: 0 10px;
}
.opt-toolbar .icon-opt-add {
  background-position: -30px 0;
}
.opt-toolbar .icon-opt-left {
  background-position: -60px 0;
}
.opt-toolbar .icon-opt-right {
  background-position: -90px 0;
}
.opt-toolbar .icon-opt-top {
  background-position: -120px 0;
}
.opt-toolbar .icon-opt-bottom {
  background-position: -150px 0;
}
.opt-toolbar .icon-opt-set {
  background-position: -180px 0;
}
.opt-toolbar .icon-opt-delete {
  background-position: -210px 0;
}
.opt-toolbar .opt-btn:hover .icon-opt-add {
  background-position: -30px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-left {
  background-position: -60px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-right {
  background-position: -90px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-top {
  background-position: -120px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-bottom {
  background-position: -150px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-set {
  background-position: -180px -30px;
}
.opt-toolbar .opt-btn:hover .icon-opt-delete {
  background-position: -210px -30px;
}
.add-compt {
  position: relative;
  width: 100%;
}
.add-compt .add-compt-pop {
  position: absolute;
  left: -10px;
  right: 0px;
  bottom: -10px;
  cursor: pointer;
}
.add-compt .add-compt-pop .ic-add {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background:#258FFB;
  color: #fff;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 2;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.add-compt .add-compt-pop .ic-add span {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.add-compt .add-compt-pop .line {
  width: 0;
  position: absolute;
  left: 10px;
  top:50%;
  height: 2px;
  margin-top: -1px;
  background:#258FFB;
  -webkit-transition: width 0.35s;
  transition: width 0.35s;
}
.add-compt .add-compt-pop:hover .line {
  width: 100%;
  width: calc(100% - 10px);
}